<template>
	<view class="content">
		<view class="forget-bg">
			<view class="forget-card">
				<view class="forget-input forget-margin-b">
					<input placeholder="请输入昵称"  v-model="nickName" maxlength="20"/>
				</view>
				<view class="forget-input forget-margin-b">
					<input placeholder="请输入用户名"  v-model="userName" maxlength="20"/>
				</view>
				<view class="forget-input forget-margin-b">
					<input type="number" maxlength="11" v-model="phone" @input="fomatPhone"   placeholder="请输入您的手机号" />
				</view>
				<view class="forget-input forget-margin-b">
					<view class="verify-left">
						<input type="number" maxlength="6" v-model="code" @input="fomatCode" placeholder="请输入图形验证码" />
					</view>
					<view class="verify-right">
						<CodeImg />
					</view>
				</view> 
				<view class="forget-input forget-margin-b">
					<view class="verify-left">
						<input type="number" maxlength="6" v-model="smsCode" @input="fomatSmsCode" placeholder="请输入手机验证码" />
					</view>
					<view class="verify-right">
						<button class="verify-btn" type="primary" @click="send">获取验证码</button>
					</view>
				</view>
				<view class="forget-input">
					<input   type="password"  maxlength="16" v-model="password" placeholder="请输入密码(8-16位)" />
				</view>
				<view class="forget-input" @click="show=true">
					 注册类型 :
					 {{ roleId ==1?'商家':'用户'}}
				</view>
			</view>
		</view>
		<view class="forget-btn">
			<button class="landing" type="primary" @click="submit">提交</button>
		</view>
		<u-toast ref="uToast" />
		<u-select v-model="show" :list="list" @confirm="confirmSelect"></u-select>
	</view>
</template>

<script>
	 import CodeImg from '@/app/components/CodeImg.vue'  
	 import {mapState,mapMutations} from 'vuex';
	 import {  api } from '@/app/api.js'  
	 import { encrypt,decrypt } from "@/lib/jsencrypt";
	export default {
		components:{CodeImg},
		data() {
			return {
				"nickName": "","userName": "","password": "","phone": '',"code": '',"smsCode": '',
				roleId:2,show:false,
				list: [
					{value: 1,label: '商家'},
					{value: 2,label: '用户'}
				],
			}
		},
		computed: { ...mapState(['uuid']),},
		onLoad() {

		},
		methods: {
			fomatPhone(e){
				   var th= this;
					this.formatNum(e,0);
					this.$nextTick(() => {  
					 th.phone = e.target.value   			 
					})  	
			},
			fomatCode(e){ 
				   var th= this;
					this.formatNum(e,0);
					this.$nextTick(() => {  
					 th.code = e.target.value   			 
					})  	
			},
			fomatSmsCode(e){
				   var th= this;
					this.formatNum(e,0);
					this.$nextTick(() => {  
					 th.smsCode = e.target.value   			 
					})  	
			},
			confirmSelect(e){
				console.log("e: ",e[0]); this.roleId = e[0].value; 
			},
			send() {  
			  if(this.regPhone(this.phone)) return;
			  if(this.isEmpty(this.code)) return uni.showToast({title: '图形验证码不能为空',icon:'none',duration: 2000}) 
			   
			  api("/message/message/sendRegisterCode", {"code": this.code,"phone": encrypt(this.phone),"uuid": this.uuid}).then(data=>{
			  		  console.log("data: ",data);
					  if(data.code == 500){
						  uni.showToast({title: data.msg,icon:'none',duration: 2000})  
					  }else{
						  uni.showToast({title: "已发送图形验证码",icon:'none',duration: 2000})  
					  }
			  })
			},
			submit() {
				    var th = this;
					if(this.isEmpty(this.nickName)) return uni.showToast({title: '昵称不能为空',icon:'none',duration: 2000}) 
					if(this.isEmpty(this.userName)) return uni.showToast({title: '用户名不能为空',icon:'none',duration: 2000}) 
					if(this.isEmpty(this.code)) return uni.showToast({title: '图形验证码不能为空',icon:'none',duration: 2000}) 
					if(this.isEmpty(this.smsCode)) return uni.showToast({title: '手机验证码不能为空',icon:'none',duration: 2000}) 
					if(this.regPhone(this.phone)) return;
					if(this.regPassword(this.password)) return;
					api("/register",{
						 "nickName": this.nickName,
						  "userName": this.userName,
						  "phonenumber": encrypt( this.phone,), 
						  "password": encrypt( this.password,), 
						  "roleId": 2,
						  "smsCode": this.smsCode,
					}).then(data=>{
						 if(data.code == 500){
						 	uni.showToast({title: data.msg,icon:'none',duration: 2000})  
						 }else{
						    th.code = ""
							th.smsCode = ""
							uni.showToast({title: "注册成功,可前往登陆",icon:'none',duration: 2000})  
							
						 }
					})
			},
		}
	}
</script>

<style>
	.verify-left{
		width: calc(100% - 260upx);
	}
	.verify-right{
		padding-left: 20upx;
	}
	.verify-btn{
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		width: 240upx;
		border-radius: 8upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.verify-left,.verify-right{
		float: left;
	}
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.forget-btn{
		padding: 10upx 20upx;
		margin-top: 800upx;
	}

	.forget-input input{
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}
	.forget-margin-b{
		margin-bottom: 25upx;
	}
	.forget-input{
		padding: 10upx 20upx;
		overflow: auto;
	}
	.forget-card{
		background: #fff;
		border-radius: 12upx;
		padding: 60upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0,0,0,0.12);
		position: relative;
		margin-top: 120upx;
	}
	.forget-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#FF978D, #FFBB69);
	}
</style>
